<template>
  <div class="exampleitem-top">
    <NavHeader />
    <div class="exampleitem-top-content">
      <h1>智能、高效、透明的审计管理解决方案</h1>
      <h3>全流程覆盖，助力企业审计工作数字化升级</h3>
    </div>
  </div>
  <div class="exampleitem-center">
    <div class="exampleitem-center-item2">审计系统简介</div>
    <h3 class="exampleitem-center-item2h3">
      亚宝审计系统是亚宝药业集团为提升审计工作效率、规范审计流程而开发的综合性管理平台。系统覆盖审计工作的全流程，从项目管理到整改跟踪，支持多用户操作、数据安全管理和灵活的权限配置。通过与企业微信、财务软件等系统的无缝对接，亚宝审计系统为集团内部审计和外部审计工作提供了高效、透明的解决方案。
    </h3>
    <div
      class="exampleitem-center-item"
      v-for="(item, index) in list"
      :style="{
        'flex-direction': index % 2 == 0 ? 'unset' : 'row-reverse',
        background: index % 2 == 0 ? '#f3f3f6' : '#fff',
      }"
    >
      <div class="exampleitem-center-item-text">
        <h1>{{ item.title }}</h1>
        <ul>
          <li v-for="(ele, i) in item.descList">{{ ele }}</li>
        </ul>
      </div>
      <img :src="item.img" alt="" />
    </div>
  </div>
  <Recommend />
  <pageBottom />
  <BackTop />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import NavHeader from "@/components/NavHeader.vue";
import pageBottom from "@/components/pageBottom.vue";
import BackTop from "@/components/BackTop.vue";
import Recommend from "@/components/Recommend.vue";
import xhqx from "@/assets/img/Exampleitem6/xhqx.png";
import xmgl from "@/assets/img/Exampleitem6/xmgl.png";
import sjzy from "@/assets/img/Exampleitem6/sjzy.png";
import sjgl from "@/assets/img/Exampleitem6/sjgl.png";
import zggl from "@/assets/img/Exampleitem6/zggl.png";
import xtgl from "@/assets/img/Exampleitem6/xtgl.png";

let list = reactive([
  {
    title: "用户与权限管理",
    descList: [
      "用户管理：支持添加、删除用户，分配角色(审计人员、对接人、审核人等)，并根据角色分配不同操作权限",
      "权限配置：提供灵活的权限设置，支持按项目、按阶段分配权限，确保系统操作的灵活性和安全性。",
      "个人信息管理：用户可修改个人信息、设置密码，并配置邮箱等通知方式。",
    ],
    img: xhqx,
  },
  {
    title: "项目管理",
    descList: [
      "项目创建：通过“创建项目向导”快速建立新项目，支持输入项目名称、审计期间等信息。",
      "进度跟踪：实时显示项目总天数、消耗天数和剩余天数，支持查看项目成员信息和权限申请记录。",
      "项目归档：支持项目归档操作，确保审计项目文档的完整性和规范性。",
    ],
    img: xmgl,
  },
  {
    title: "审计作业管理",
    descList: [
      "审计任务：支持创建、修改和提交审计任务，分配任务给项目组成员。",
      "审计底稿与问题管理：支持审计底稿的创建、修改和审批，记录审计过程中发现的问题及整改建议。",
      "报告生成：支持审计报告的初稿、征求意见稿和终稿的生成与审批，确保审计质量。",
    ],
    img: sjzy,
  },
  {
    title: "数据管理",
    descList: [
      "数据导入与导出：支持从本地上传Excel模板，审计人员可在线修改模板，添加、删除或修改控制点。",
      "数据校验：系统自动校验数据逻辑，确保被审计单位上传的数据符合要求。",
      "数据统计：支持按时间周期、分子公司、业务类型等关键词筛选数据，生成评分汇总报告。",
    ],
    img: sjgl,
  },
  {
    title: "整改管理",
    descList: [
      "整改问题跟踪：支持新增、修改整改问题，跟踪问题的整改进度和落实情况。",
      "整改方案制定：被审计单位可制定整改方案，系统提供事前提醒功能，确保整改按时完成。",
      "整改台账：记录所有整改问题的跟踪情况，支持查看整改落实记录。",
    ],
    img: zggl,
  },
  {
    title: "系统管理与配置",
    descList: [
      "系统设置：支持修改系统名称、Logo，管理菜单页面（新增、编辑、删除）。",
      "角色与权限管理：支持角色创建、权限分配，确保系统操作符合集团管理要求。",
      "日志与公告管理：记录用户操作日志，支持发布公告和公告预览。",
    ],
    img: xtgl,
  },
]);
</script>

<style lang="scss" scoped>
ul {
  li {
    list-style: none;
    list-style-type: circle;
    color: #666;
    font-size: 17px;
    line-height: 220%;
    margin-bottom: 20px;
  }
}
.exampleitem-top {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("@/assets/img/exampleitem6/bg.png");
  height: 100vh;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4784313725);
  }
  &-content {
    position: absolute;
    margin-left: 18%;
    top: 50%;
    h1 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 35px;
    }
  }
}
.exampleitem-center {
  color: #000;
  background-color: #fff;
  padding-bottom: 100px;
  padding-top: 50px;
  &-item2 {
    width: 100%;
    height: 60px;
    background-image: url("@/assets/img/exampleitem/tle.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 33px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 60px;
    margin-bottom: 50px;
  }
  &-item2h3 {
    width: 60%;
    text-align: center;
    margin: auto;
    margin-bottom: 100px;
    color: #666;
    line-height: 35px;
  }
  &-item {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    padding: 30px 10px;

    padding: 3% 15%;
    &-text {
      width: 60%;
      h1 {
        font-size: 35px;
        transform: translate(40px);
        margin-bottom: 20px;
      }
    }
    img {
      width: 40%;
    }
  }
}
</style>
